<template>
    <div class="container">
        <header>选择你想要共享的窗口</header>
        <div class="window-content" v-if="sourcesList.length">
            <div class="desktop">
                <div class="title">桌面</div>
                <div class="screen-list">
                    <div class="screen-item" v-for="(item, index) in sourcesList.filter(item => item.type === 'screen')"
                        :key="index">
                        <img :src="item.thumb" alt="">
                    </div>
                </div>
            </div>
            <div class="screen">
                <div class="title">应用</div>
                <div class="screen-list">
                    <div class="screen-item" v-for="(item, index) in sourcesList.filter(item => item.type === 'window')"
                        :key="index">
                        <img :src="item.thumb" alt="">
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <el-button @click="close">取消</el-button>
            <el-button color="#0091ff">确定</el-button>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const { ipcRenderer } = require('electron')

onMounted(() => {
    // 通知主进程获取媒体源缩略图
    ipcRenderer.send('get-screen')
})

// 保存媒体缩略图列表
let sourcesList = ref<any[]>([])

// 接收主进程返回的缩略图信息
ipcRenderer.on('get-screen', async (e: any, info: any) => {
    const { source, type } = info
    let thumb = source.thumbnail.toDataURL()
    let sourceInfo = {
        thumb,
        type,
        source
    }
    sourcesList.value.push(sourceInfo)
})

// 取消按钮回调
const close = () => {
    ipcRenderer.send('close-screen-choose')
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    header {
        width: 100%;
        margin: 15px 0;
        font-size: 18px;
        font-weight: bold;
    }

    .window-content {
        width: 100%;
        flex: 1;
        overflow: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .desktop,
        .screen {
            .title {
                width: 100%;
                margin: 10px 0;
            }

            .screen-list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .screen-item {
                    width: 130px;
                    height: 75px;
                    background-color: skyblue;
                    margin-right: 20px;
                    margin-bottom: 15px;

                    &:nth-of-type(3n) {
                        margin-right: 0;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    footer {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}
</style>